<template>
  <div class="project-setting-view">
    <p class="project-setting-title">
      {{ $t("form.setting.submitSettingLabel") }}
      <span class="small-font-size ml20 text-secondary-color">{{ $t("form.setting.submitSettingDescription") }}</span>
    </p>
    <el-divider />
    <el-form
      ref="submitSettingFormRef"
      :model="settingConf"
      @submit.prevent
    >
      <div class="setting-item">
        <p
          class="label"
          style="width: 40%"
        >
          {{ $t("form.setting.submitShowTypeLabel") }}
        </p>
        <el-radio-group
          v-model="settingConf.submitShowType"
          @change="saveSettingHandle"
        >
          <el-radio :value="1">{{ $t("form.setting.systemDefaultPrompt") }}</el-radio>
          <el-radio :value="2">{{ $t("form.setting.customPromptPage") }}</el-radio>
        </el-radio-group>
      </div>
      <div
        v-if="settingConf.submitShowType === 2"
        class="mt20"
      >
        <form-tinymce
          v-model:value="settingConf.submitShowCustomPageContent"
          @blur="saveSettingHandle"
        />
      </div>
      <div class="setting-item">
        <p class="label">{{ $t("form.setting.submitJumpLogicLabel") }}</p>
        <el-button
          @click="showDialog"
          text
          bg
          size="default"
        >
          {{
            settingConf.commitJumpLogicList && settingConf.commitJumpLogicList.length
              ? $t("form.setting.modifyJumpLogic")
              : $t("form.setting.addJumpLogic")
          }}
        </el-button>
      </div>
      <div class="setting-item">
        <p class="label">{{ $t("form.setting.submitJumpLabel") }}</p>
        <el-switch
          v-model="settingConf.submitJump"
          @change="saveSettingHandle"
        />
      </div>
      <el-form-item
        v-if="settingConf.submitJump"
        prop="submitJumpUrl"
        :rules="[
          { required: true, message: $t('form.setting.enterJumpAddress'), trigger: 'blur' },
          {
            type: 'url',
            message: $t('form.setting.enterValidURL'),
            trigger: ['blur', 'change']
          }
        ]"
      >
        <el-input
          @change="saveSettingHandle"
          v-model="settingConf.submitJumpUrl"
          placeholder="https://www.xxxxx.com"
        />
      </el-form-item>
      <el-divider class="mt20">{{ $t("form.setting.submitAfterAnswerLabel") }}</el-divider>
      <div class="setting-item">
        <p class="label">
          {{ $t("form.setting.viewFilledContentLabel") }}
          <el-tooltip
            class="item"
            :content="$t('form.setting.viewFilledContentTooltip')"
            effect="dark"
            placement="top-start"
          >
            <el-icon>
              <ele-QuestionFilled />
            </el-icon>
          </el-tooltip>
        </p>
        <el-switch
          v-model="settingConf.showSubmitContentBtn"
          @change="saveSettingHandle"
        />
      </div>
      <div class="setting-item">
        <p class="label">{{ $t("form.setting.modifyFilledContentLabel") }}</p>
        <el-switch
          v-model="settingConf.updateSubmitContentBtn"
          @change="saveSettingHandle"
        />
      </div>
    </el-form>
    <el-dialog
      v-model="dialogVisible"
      class="t-dialog"
      :title="$t('form.setting.jumpLogicDialogTitle')"
      width="58%"
    >
      <logic-jump
        v-if="dialogVisible"
        ref="logicJumpRef"
        :submit-setting-form="settingConf"
      />
      <template #footer>
        <span class="dialog-footer">
          <el-button
            size="default"
            @click="dialogVisible = false"
          >
            {{ $t("formI18n.all.cancel") }}
          </el-button>
          <el-button
            type="primary"
            size="default"
            @click="submitLogicalSettings"
          >
            {{ $t("formI18n.all.confirm") }}
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="SubmitSetting">
import FormTinymce from "@/views/formgen/components/tinymce/index.vue";
import LogicJump from "@/views/form/setting/LogicJump/index.vue";
import { ref } from "vue";

const dialogVisible = ref(false);

const logicJumpRef = ref(null);

const props = defineProps({
  settingConf: {
    type: Object,
    required: true
  }
});

const emit = defineEmits(["update"]);

const submitSettingFormRef = ref(null);

const saveSettingHandle = () => {
  submitSettingFormRef.value.validate(valid => {
    if (valid) {
      emit("update", props.settingConf);
    } else {
      return false;
    }
  });
};

const showDialog = () => {
  dialogVisible.value = true;
};

const submitLogicalSettings = () => {
  dialogVisible.value = false;
  props.settingConf.commitJumpLogicList = logicJumpRef.value.commitJumpLogicList;
  emit("update", props.settingConf);
};
</script>

<style lang="scss" scoped>
@use "settting" as *;

.submit-prompt-img {
  width: 100%;
  height: 117px;
  background-color: #f7f7f7;
  display: flex;
  align-items: center;
  justify-items: center;
  justify-content: center;
}
</style>
